<template>
  <div class="light-com">
      <div class="light-outer" :class="(selected?'selected':'')+ ' type_'+color.replace('#','')" :style="formatStyle">
      </div>
  </div>
</template>

<script>

export default {
  name: "Light",
  props:{
    diameter:{
      type:Number,
      default:13,
    },
    selected:{
      type:Boolean,
      default:false,
    },
    color:{
      type:String,
      default:'#fed200'
    }
  },
  computed:{
    formatStyle(){
      return{
        background: this.color,
        width:this.selected?(this.diameter+5)+'px':this.diameter+'px',
        height:this.selected?(this.diameter+5)+'px':this.diameter+'px',
      }
    }
  }
}
</script>

<style scoped lang="scss">
.light-outer{
  border-radius: 50%;
}
.light-outer.selected.type_00e9e6{
  animation: shadow-1 3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite alternate;
}
.light-outer.selected.type_fbd504{
  animation: shadow-2 3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite alternate;
}
.light-outer.selected.type_fe0000{
  animation: shadow-3 3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite alternate;
}
@keyframes shadow-1{
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 233, 230, 0.3);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(0, 233, 230, 0.3);
  }
}
@keyframes shadow-2{
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(251, 213, 4, 0.3);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(251, 213, 4, 0.3);
  }
}
@keyframes shadow-3{
  0% {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(254, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(254, 0, 0, 0.3);
  }
}
</style>
